<template>
  <!-- 说明：
热点事件》没有社交
历史事件》没有社交，动向
 -->
  <!-- 全部、百科、社交媒体、网站 -->
  <!-- 百科： -->
  <!-- 搜索框组件 -->
  <div>
    <div class="max_box">
      <div class="search-con flex-center-column">
        <slot></slot>
        <div class="search-wrap flex-between">
          <input
            v-model="inputValue"
            class="input"
            placeholder="请输入关键字搜索"
            style="font-size: 16px"
            @keyup.enter="goSearch"
          />
          <div class="search-button flex-center" @click.stop="goSearch">
            <div class="icon"></div>
            <div class="text">搜索</div>
          </div>
          <!-- 【首页】 的关键词查询；-->
          <div class="related-result" v-show="relatedShow">
            <div class="center-line"></div>
            <div
              class="result-content"
              v-for="(item, index) in relatedResult"
              :key="index"
              @click.stop="getInputVAlue($event)"
            >
              {{ item }}
            </div>
            <div class="result-content close_btn" @click.stop="relatedShowFun">关闭</div>
          </div>
          <!-- 按钮： -->
          <div class="btn_maxbox" @click="cubeFun" v-if="knowTF">
            <span>知识图谱</span>
          </div>
        </div>
      </div>
      <div class="back_box" v-if="backTF">
        <el-button @click="goBack">返回</el-button>
      </div>
    </div>
    <!--  -->
    <div class="btn_box" v-if="btnTF">
      <div class="btn_div">
        <div :class="btnKeyFun(item)" v-for="(item, idx) in tabArr" :key="idx">
          <span @click.stop="activeBTNFun(item)">{{ item }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from "axios";
// import func from 'vue-temp/vue-editor-bridge';

export default {
  props: {
    keyValue: {
      type: String,
      default: () => "",
    },
    backTF: {
      // type: String,
      default: false,
    },
  },
  data() {
    return {
      btnKey: "全部",
      inputValue: "",
      relatedShow: false,
      timer: null,
      historyList: [],
      relatedResult: [],
      tabArr: ["全部", "百科", "网站", "社交媒体"],
    };
  },
  watch: {
    keyValue: {
      deep: true,
      immediate: true,
      handler(n) {
        // console.log("xxxx:", n);
        this.inputValue = n;
        // console.log(this.inputValue)
      },
    },
    // inputValue: "getKeyword",
    inputValue() {
      // console.log(sessionStorage.showTF);
      if (sessionStorage.showTF == "1") {
        sessionStorage.showTF = "0";
      } else {
        // 搜索：
        this.getKeyword();
      }
    },
  },
  methods: {
    activeBTNFun(btn) {
      // console.log("打打打", btn);
      this.btnKey = btn;
      let num = 0;
      switch (btn) {
        case "百科":
          num = 6;
          break;
        case "社交媒体":
          num = 7;
          break;
        case "网站":
          num = 8;
          break;
        default:
          break;
      }
      // 保存：
      sessionStorage.btnKey = btn;
      sessionStorage.btnNum = num;
      //
      this.$emit("getActiveBTNFun", num);
    },
    btnKeyFun(str) {
      if (this.btnKey == str) {
        return ["active"];
      } else {
        return [];
      }
    },
    // 知识图谱-跳转：
    cubeFun() {
      //       1. * （搜索全部数据）
      // 2. 不填写 （啥也没搜）
      // 3. str（搜索的内容）
      // 搜索页：http://ip:port/rxl/searchlist?keyword={检索的内容/不填写/*}
      let aUrl = `${process.env.VUE_APP_CUBE_API}/rxl/searchlist?keyword=${this.inputValue}`;
      // 有缓存》走缓存
      if (localStorage.mofangUrl) {
        aUrl = `${localStorage.mofangUrl}/rxl/searchlist?keyword=${this.inputValue}`;
      }
      window.open(aUrl);
      // 跳转到新页面：
      // window.location.href = aUrl;
    },
    goBack() {
      // console.log("返回反复回");
      sessionStorage.showTF = "1";
      // this.$router.go(-1);
      this.$router.push("/");
    },
    goSearch() {
      this.relatedShow = false;
      if (!this.inputValue) {
        this.$message({
          message: "搜索关键字不能为空！",
          type: "warning",
        });
        return;
      }
      // 字符串
      sessionStorage.showTF = "1";
      //保存
      sessionStorage.currentPage = "1";
      // 判断是首页还是结果页
      if (this.$route.path == "/results") {
        this.$emit("getResults", this.inputValue);
        return;
      }
      this.$router.push({
        name: "results",
        params: {
          keyValue: this.inputValue,
        },
      });

      // // 历史记录
      // this.historyList=localStorage.history;
      //  if (!this.historyList.some(item => item == this.inputValue)) {
      //       //接口
      //     }
    },
    //
    relatedShowFun() {
      // console.log("子组件");
      this.relatedShow = false;
    },
    getKeyword() {
      //设置计时器
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        //搜索提示
        this.relatedShow = false;
        if (this.inputValue != "") {
          Axios.get(localStorage.axiosUrl + "/keywordsTips/" + this.inputValue).then(
            (res) => {
              this.relatedResult = res.data;
              if (this.relatedResult.length == 0) {
                this.relatedShow = false;
              } else {
                this.relatedShow = true;
              }
            }
          );
        }
      }, 500);
    },
    //点击搜索提示,将其放入搜索框中
    getInputVAlue(e) {
      this.relatedShow = false;
      this.inputValue = e.target.innerText;
      sessionStorage.showTF = "1";
      //保存
      sessionStorage.currentPage = "1";
      if (this.$route.path == "/results") {
        this.$emit("getResults", this.inputValue);
      } else {
        // 跳转：
        this.$router.push({
          name: "results",
          params: {
            keyValue: this.inputValue,
          },
        });
      }
    },
  },
  computed: {
    btnTF() {
      if (this.$route.path == "/results") {
        return true;
      } else {
        return false;
      }
    },
    // 显示：
    knowTF() {
      if (this.$route.path == "/") {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {
    if (sessionStorage.btnKey) {
      this.btnKey = sessionStorage.btnKey;
    }
    // console.log(process.env.VUE_APP_CUBE_API);
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.max_box {
  position: relative;

  .back_box {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.search-con {
  // height: 100%;
  // max-height: calc(100vh - #{vh(60)});
  margin: 0 auto;
  .title {
    // margin-bottom: 0.4rem;
    // font-weight: 700;
    // font-style: normal;
    // font-size: 0.4rem;
    // letter-spacing: 0.04rem;
    color: rgba(0, 0, 0, 0.847);
    margin-bottom: 40px;
    font-weight: 700;
    font-style: normal;
    font-size: 40px;
    letter-spacing: 4;
  }
  .search-wrap {
    // height: 0.6rem;
    // font-size: 0.14rem;
    position: relative;
    height: 60px;
    font-size: 14px;
    .btn_maxbox {
      box-sizing: border-box;
      position: absolute;
      right: -180px;
      width: 160px;
      height: 60px;
      background: #2d73ff;
      border-radius: 10px;
      color: #fff;
      font-size: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .input {
      display: block;
      height: 100%;
      border: none;
      border-radius: 10px 0px 0px 10px;
      box-shadow: rgba(140, 161, 202, 0.42) 0px 0px 10px;
      background-color: white;
      // width: 8rem;
      // padding-left: 0.2rem;
      width: 800px;
      padding-left: 20px;
    }
    .related-result {
      background-color: white;
      z-index: 30;
      border-radius: 0px 0px 10px 10px;
      box-shadow: rgba(140, 161, 202, 0.42) 0px 5px 5px;
      position: absolute;
      left: 0;
      // top: 0.5rem;
      // width: 8rem;
      // padding: 0.097rem 0.2rem 0 0.2rem;
      top: 50px;
      width: 800px;
      padding: 10px 20px 0 20px;
      .center-line {
        height: 2px;
        background-color: rgb(235, 230, 230);
        // margin-bottom: 0.2rem;
        // width: 7.6rem;
        margin-bottom: 20px;
        width: 760px;
      }
      .result-content:hover {
        color: rgb(45, 115, 255);
      }
      .result-content {
        // margin-bottom: 0.2rem;
        margin-bottom: 20px;
        cursor: pointer;
      }
      .close_btn {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
      }
    }
    .search-button {
      background-color: rgb(45, 115, 255);
      color: rgb(255, 255, 255);
      border-radius: 0px 10px 10px 0px;
      box-shadow: rgba(140, 161, 202, 0.42) 0px 0px 10px;
      // width: 1.6rem;
      // height: 0.6rem;
      // font-size: 0.24rem;
      width: 160px;
      height: 60px;
      font-size: 24px;
      cursor: pointer;
      .icon {
        // margin-right: 0.16rem;
        margin-right: 16px;
        width: 25px;
        height: 25px;
        background-image: url(~@/assets/common/icon-search.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px 20px;
      }
    }
  }
}
.btn_box {
  margin-top: 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  // font-weight: bold;
  .btn_div {
    margin-top: 0px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 960px;
    padding-left: 20px;
    font-size: 14px;
    z-index: 20;
    margin: 20px 0;
    > div {
      // position: relative;
      // top: 26px;
      // margin: 0 20px;
      > span {
        cursor: pointer;
      }
    }
    > div + div {
      margin-left: 60px;
    }
    .active {
      color: #2d73ff;
      font-weight: bold;
    }
  }
}
</style>
